<template>
  <div class="deviceForm">
    <el-form :inline="true" label-position="left">
      <div class="formItem">
        <div class="formItem__title">
          <FormTitle title="电源状态" />
        </div>
        <div class="formItem__con formItem__con1">
          <el-form-item label="Ua:" style="width: 140px">
            <el-col :span="16">
              <el-input></el-input>
            </el-col>
            <el-col class="text-center" :span="1" style="margin: 0 0.5rem">V</el-col>
          </el-form-item>
          <el-form-item label="Ia:" style="width: 140px">
            <el-col :span="16">
              <el-input></el-input>
            </el-col>
            <el-col class="text-center" :span="1" style="margin: 0 0.5rem">A</el-col>
          </el-form-item>
          <el-form-item label="Ub:" style="width: 140px">
            <el-col :span="16">
              <el-input></el-input>
            </el-col>
            <el-col class="text-center" :span="1" style="margin: 0 0.5rem">V</el-col>
          </el-form-item>
          <el-form-item label="Ib:" style="width: 140px">
            <el-col :span="16">
              <el-input></el-input>
            </el-col>
            <el-col class="text-center" :span="1" style="margin: 0 0.5rem">A</el-col>
          </el-form-item>
          <el-form-item label="Uc:" style="width: 140px">
            <el-col :span="16">
              <el-input></el-input>
            </el-col>
            <el-col class="text-center" :span="1" style="margin: 0 0.5rem">V</el-col>
          </el-form-item>
          <el-form-item label="Ic:" style="width: 140px">
            <el-col :span="16">
              <el-input></el-input>
            </el-col>
            <el-col class="text-center" :span="1" style="margin: 0 0.5rem">A</el-col>
          </el-form-item>
        </div>
        <div class="formItem__con">
          <el-button type="primary">查询</el-button>
          <el-button type="primary">设置</el-button>
        </div>
        <div class="formItem__con">
          <el-button type="primary">一键升源</el-button>
          <el-button type="primary">一键降源</el-button>
        </div>
      </div>
    </el-form>
    <div class="formItem">
      <div class="formItem__title">
        <FormTitle title="角度值" />
      </div>
      <div class="formItem__con">
        <el-form-item style="width: 80px; margin-right: 10px">
          <el-input></el-input>
        </el-form-item>
        <el-form-item style="width: 80px; margin-right: 10px">
          <el-select placeholder=" "> </el-select>
        </el-form-item>
        <el-button class="btnWin_100" type="primary">设置功率因素</el-button>
      </div>
    </div>
    <div class="formItem">
      <div class="formItem__title">
        <FormTitle title="误差值" />
      </div>
      <div class="formItem__con">
        <el-form-item style="width: 170px; margin-right: 10px">
          <el-input></el-input>
        </el-form-item>
        <el-button class="btnWin_100" type="primary">设置</el-button>
      </div>
    </div>
    <div class="formItem">
      <div class="formItem__title">
        <FormTitle title="错接线场景" />
      </div>
      <div class="formItem__con">
        <el-button type="primary">接线组合</el-button>
        <el-button type="primary">下发命令</el-button>
      </div>
    </div>
    <div class="formItem">
      <div class="formItem__title">
        <FormTitle title="计时器控制" />
      </div>
      <div class="formItem__con">
        <el-form-item style="width: 140px">
          <el-col :span="16">
            <el-input></el-input>
          </el-col>
          <el-col class="text-center" :span="1" style="margin: 0 0.5rem">时</el-col>
        </el-form-item>
        <el-form-item style="width: 140px">
          <el-col :span="16">
            <el-input></el-input>
          </el-col>
          <el-col class="text-center" :span="1" style="margin: 0 0.5rem">分</el-col>
        </el-form-item>
        <el-button type="primary">设置</el-button>
        <el-button type="primary">开始</el-button>
        <el-button type="primary">暂停</el-button>
      </div>
    </div>
    <el-form label-position="left">
      <div class="formItem">
        <div class="formItem__title">
          <FormTitle title="基本连接方式" />
        </div>
        <div class="formItem__con">
          <el-form-item label="方式:">
            <el-select placeholder=""> </el-select>
          </el-form-item>
          <el-form-item label="模式:">
            <el-select placeholder=""> </el-select>
          </el-form-item>
          <el-button type="primary">下发命令</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="tsx" name="DeviceForm">
import FormTitle from "../FormTitle/index.vue";
</script>

<style scoped lang="scss">
.deviceForm {
  width: 344px;
  height: 100%;
  padding: 0 30px 10px 0;
  overflow: hidden;
  overflow-y: auto;
  background: #f5f5f5;
  .formItem__con {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0 10px 30px;
    margin-left: 15px;
    border-bottom: 1px solid #d8d8d8;
  }
  .formItem__con1 {
    justify-content: space-between;
  }
}
.el-button {
  width: 80px;
  height: 30px;
  background: #21b6a4;
  border-radius: 4px;
}
.btnWin_100 {
  width: 100px;
}
.el-form-item {
  margin-right: 0;
}
</style>
